<template>
  <div id="search">
    <form action="/public">
      <van-search
          v-model="searchText"
          shape="round"
          background="#f9b0cd"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
      >
        <template #action>
          <div @click="doKeyWordSearch">搜索</div>
        </template>
      </van-search>
    </form>
    <van-divider content-position="left">已选标签</van-divider>
    <van-empty
        v-if="activeIds.length === 0"
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="39"
        description="未选择标签"
    />

    <van-row :gutter="[18, 18]">
      <van-col v-for="tag in activeIds">
        <van-tag round type="primary" closeable size="large" @close="handleClose(tag)">{{ tag }}</van-tag>
      </van-col>
    </van-row>

    <van-divider content-position="left">选择标签</van-divider>

    <van-tree-select
        v-model:active-id="activeIds"
        v-model:main-active-index="activeIndex"
        :items="tagList"
    />

    <van-button color="#fab9d3" block round @click="handleSearchResult">
      <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="2000"
          :touchable="false"
          :show-indicators="false"
      >
        <van-swipe-item>点击我</van-swipe-item>
        <van-swipe-item>搜索匹配的伙伴</van-swipe-item>
      </van-swipe>
    </van-button>


  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {useRouter} from "vue-router";
import request from "../../plugins/request.ts";

const routerTo = useRouter();
const searchText = ref('');

// 已选中的标签
const activeIds = ref([]);
// 已选中标签的父id
const activeIndex = ref(0);
const originTagList = [
  {
    text: '方向',
    children: [
      {text: 'Java', id: "Java"},
      {text: 'C++', id: 'C++'},
      {text: 'Go', id: 'Go'},
      {text: '前端', id: '前端'},
    ],
  },
  {
    text: '目标',
    children: [
      {text: '考研', id: '考研'},
      {text: '春招', id: "春招"},
      {text: '秋招', id: "秋招"},
      {text: '社招', id: "社招"},
      {text: '转行', id: "转行"},
      {text: '跳槽', id: "跳槽"},
    ],
  },
];
let tagList = ref(originTagList);
/**
 * 从后台获取标签
 */
onMounted(async () => {
  const result = await request.get("/tag/select/all");
  if (result.data.code === 200) {
    tagList.value = result.data.data.map(item => ({
      text: item.tagName,
      children: item.childrenTagList.map(child => ({
        text: child.tagName,
        id: child.tagName
      }))
    }))

  }
})

/**
 * 搜索过滤
 * 当搜索词中存在于 tagList的children中，就自动勾选 taglist的children
 * @param val
 */
const onSearch = (val) => {
  tagList.value = originTagList.map(parentTag => {
    const tempChildren = [...parentTag.children];
    const tempParentTag = {...parentTag};
    tempParentTag.children = tempChildren.filter(item => item.text.includes(searchText.value));
    return tempParentTag;
  })
};
const handleClose = (tag) => {
  // 只过滤返回false的值
  activeIds.value = activeIds.value.filter(item => {
    return item !== tag
  })
}

const handleSearchResult = () => {
  routerTo.push({
    path: "/search/list",
    query: {
      tags: activeIds.value
    }
  })
}
/**
 * 点击搜索框的搜索按钮执行的方法
 */
const doKeyWordSearch = () => {

  routerTo.push({
    path: "/search/list",
    query: {
      // tags: Array.from(searchText.value)
      tags: searchText.value ? searchText.value.split(",") : ["Java"]
    }
  })
}
</script>

<style scoped>
.notice-swipe {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
}
</style>